<template>
    <!-- 顶部导航栏 -->
    <NavBar navbarTitle="购物车"></NavBar>
    <!-- 底部tabBar -->
    <TabBar></TabBar>
    <!-- 购物车页的内容 -->
    <div class="cart-page" ref="divScrollRef">
      <!-- 未登录状态 -->
      <div class="cart-page-noLogin" v-if="false">
        <span class="noLogin-info">登录后可查看购物车中的商品</span>
        <Button class="noLogin-button" type="success" @click="login_btn">去登陆</Button>
      </div>
      <!-- 登录状态 -->
      <div class="cart-page-login" v-else>
        <div class="login-cart-list">
          <div class="cart-list-info">
            <span class="info-icon">满减</span>
            <span class="info-txt">满一件,即可享受九折优惠</span>
          </div>
          <div class="cart-list-content">
            <!-- 每一项商品 -->
            <div class="cart-list-content-item" v-for="i in 4" :key="i">
              <Checkbox></Checkbox>
              <img src="" alt="">
              <div class="item-product-info">
                <div class="info-desc">好吃不停</div>
                <div class="info-attr">绿茶味2.5kg</div>
                <div class="info-other">
                  <span class="other-price">￥1099.00</span>
                  <div class="info-change-num">
                    <span class="num-increase">+</span>
                    <input type="text">
                    <span class="num-reduce">-</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 猜你喜欢组件 -->
      <GuessLike ref="GuessLikeRef"></GuessLike>
    </div>
</template>

<script setup lang='ts'>
import NavBar from '@/components/NavBar/NavBar.vue';
import TabBar from '@/components/TabBar/TabBar.vue';
//引入vant4组件
import { Button, Checkbox } from "vant";
//引入猜你喜欢组件
import GuessLike from '@/components/GuessLike/GuessLike.vue';
import { ref, onBeforeUnmount, onDeactivated, onActivated } from "vue";
//引入路由相关
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

//主界面divScrollRef实例
const divScrollRef = ref();
//猜你喜欢组件实例
const GuessLikeRef = ref();
//存储内容区滚动条的scrollTop值
let divScrollRef_scroll_top = 0;
let timer:any = null;
let isFirst = true;

//去登陆按钮
const login_btn = () => {
  router.push("/login");
}

//监听页面滚动事件
const scrollChange = () => {
  let scroll_height =  divScrollRef.value.scrollHeight;  //内容滚动区的总高度
  let client_height = divScrollRef.value.clientHeight;  //内容区的高度
  let scroll_top = divScrollRef.value.scrollTop;  //滚动条顶部距内容区顶部的高度
  divScrollRef_scroll_top = scroll_top;  //存储当前滚动条的top值
  if((client_height + scroll_top + 20 >= scroll_height) && isFirst){
    //第一次执行要立即加载更多猜你喜欢数据
    GuessLikeRef.value.getGuessLikeList();
    isFirst = false;
    return;
  }
  if(timer !== null){
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    if(client_height + scroll_top + 20 >= scroll_height){
      //加载更多猜你喜欢数据
      GuessLikeRef.value.getGuessLikeList();
    }
  },500);
}
//keep-alive缓存生命周期
onActivated(() => {
  //调用时机为首次挂载以及从缓存中重新被插入时
  window.addEventListener("scroll",scrollChange,true);
  divScrollRef.value.scrollTop = divScrollRef_scroll_top;
  console.log('cart component enter page!');
})
onDeactivated(() => {
  //在从 DOM 上移除、进入缓存以及组件卸载时调用
  window.removeEventListener("scroll",scrollChange,true);
  console.log('cart component entry cache!');
})
onBeforeUnmount(() => {
  console.log('cart component is over!');
})
</script>

<style lang='less'>
.cart-page{
  width: 375px;
  height: calc(100vh - 60px - 46px);
  // height: 560px;
  position: relative;
  top:47px;
  overflow: scroll;

  /*未登录状态*/
  .cart-page-noLogin{
    width: 375px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #eff2f5;

    .noLogin-info{
      font-size: 14px;
      color: #9195a3;
    }

    .noLogin-button{
      width: 130px;
      height: 30px;
      margin: 20px 0;
      border-radius: 20px;
    }
  }
  /*已登录状态*/
  .cart-page-login{
    width: 375px;
    background-color: #eff2f5;

    .login-cart-list{
      width: 375px;

      .cart-list-info{
        width: 375px;
        height: 50px;
        line-height: 50px;
        font-size: 12px;
        background-color: #eff2f5;

        .info-icon{
          margin: 0 5px;
          padding: 5px 10px;
          background-color: #9195a3;
          color: #fff;
        }
      }

      /*购物车列表*/
      .cart-list-content{
        width: 375px;
        padding-bottom: 20px;
        background-color: #eff2f5;

        .cart-list-content-item{
          width: 355px;
          height: 90px;
          margin: 10px auto;
          padding: 10px;
          box-sizing: border-box;
          border-radius: 10px;
          font-size: 14px;
          display: flex;
          align-items: center;
          background: #fff;

          img{
            width: 70px;
            height: 70px;
            margin: 0 30px;
          }

          .item-product-info{
            height: 70px;

            .info-desc{
              color: #000;
              font-size: 16px;
              margin-bottom: 15px;
            }

            .info-attr{
              display: inline;
              padding: 3px;
              background-color: #eff2f5;
              color: #9195a3;
            }

            .info-other{
              width: 180px;
              height: 25px;
              margin-top: 5px;
              line-height: 25px;
              display: flex;
              justify-content: space-between;

              .other-price{
                color: #f00;
              }

              .info-change-num{
                input{
                  width: 30px;
                  height: 20px;
                  margin: 0 10px;
                  text-align: center;
                  border: none;
                  background-color: #eff2f5;
                }
              }
            }
          }
        }
      } 
    }
  } 
}
</style>